<template>
  <div class="runtime-params">
    <h3 class="title">运行参数</h3>
    <div class="params-container">
      <vxe-table
        :data="paramRows"
        auto-resize
        show-overflow
        class="param-table"
        border
        highlight-hover-row
      >
        <vxe-column
          field="paramName"
          title="参数名称"
          width="120"
          fixed="left"
        ></vxe-column>
        <vxe-column
          v-for="tank in tanksData"
          :key="tank.key"
          :field="tank.name"
          :title="tank.name"
          min-width="120"
        >
          <template #default="{ row }">
            <template v-if="row.editable">
              <input
                v-model="row[tank.key].value"
                type="number"
                class="edit-input"
                @blur="handleBlur(row.field, tank.name, row[tank.key].value)"
              />
            </template>
            <template v-else-if="row.field === 'status'">
              <span :class="`status-render ${row[tank.key].value}`">
                {{ row[tank.key].value ? '运行中' : '暂停中' }}
              </span>
            </template>
            <template v-else>
              {{ row[tank.key].value }}
            </template>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
  </div>
</template>

<script lang="ts">
import { Tsrv, T_srv, ifs, ts, vue, N_RectifierSettings } from '../config';

@T_srv.comp
export default class RuntimeParams extends vue {
  @T_srv.prop({ required: true }) data!: N_RectifierSettings.TankData[];

  @T_srv.watch('data', { deep: true })
  onTanksDataChange(newVal: N_RectifierSettings.TankData[]) {
    this.tanksData = Tsrv.utils.clone(newVal, true);
    this.$nextTick(() => {
      this.paramRows = this.getParamRows();
    });
  }

  private tanksData: N_RectifierSettings.TankData[];

  private paramRows: any[] = [];

  private getParamRows() {
    const params = [
      { paramName: '运行电压(V)', field: 'voltage', editable: false },
      { paramName: '运行电流(A)', field: 'current', editable: false },
      { paramName: '状态', field: 'status', editable: false },
      { paramName: '总设时', field: 'totalSetTime', editable: true },
      { paramName: '总计时', field: 'totalTime', editable: true },
      { paramName: '总段数', field: 'totalStages', editable: false },
      { paramName: '当前段数', field: 'currentStage', editable: false },
      { paramName: '当前段计时', field: 'stageTime', editable: false }
    ];

    return params.map(param => ({
      ...param,
      ...Object.fromEntries(
        this.tanksData.map(tank => [tank.key, tank[param.field]])
      )
    }));
  }

  created() {
    this.tanksData = Tsrv.utils.clone(this.data, true);
    this.paramRows = this.getParamRows();
  }

  handleBlur(field: string, tankName: string, value: any) {
    const newValue = this.tanksData.find(t => t.name === tankName);
    const oldValue = this.data.find(t => t.name === tankName);
    if (
      newValue &&
      oldValue &&
      newValue[field].value !== oldValue[field].value
    ) {
      this.$emit('param-change', { field, value, tank: tankName });
    }
  }
}
</script>

<style lang="scss" scoped>
.runtime-params {
  padding: 16px;
  height: 100%;

  .title {
    margin-bottom: 12px;
    color: #333;
    font-size: 16px;
  }

  .params-container {
    height: calc(100% - 24px);

    .param-table {
      height: 100%;

      ::v-deep .vxe-header--column {
        background: #f8f8f9;
      }

      ::v-deep .vxe-body--row:nth-child(even) {
        background-color: #fafafa;
      }

      .edit-input {
        width: 100%;
        padding: 4px;
        border: 1px solid #dcdee2;
        border-radius: 4px;
      }
    }
  }

  ::v-deep .status-render {
    &.true {
      color: #19be6b;
      font-weight: bold;
    }
    &.false {
      color: #ff9900;
      font-weight: bold;
    }
  }
}
</style>
